import React from 'react';
import useGetComponentInfo from "../../../hooks/useGetComponentInfo";
import {ComponentPropsType, getComponentConByType} from "../../../components/QuestionComponents";
import {useDispatch} from "react-redux";
import {updateComponent} from "../../../redux/componentsReducer";

const NoProp = () => {
  return <div>暂无属性</div>
}
const ComponentProp: React.FC = () => {
  const dispatch = useDispatch()
  // 通过useGetComponentInfo获取selectedId,组件列表和选中的组件
  const {selectedComponent, selectedId, componentList} = useGetComponentInfo()
  const {isLocked} = selectedComponent || {}
  // 没有选中组件
  if (!selectedComponent) return <NoProp/>
  console.log('selectedComponent', selectedComponent)
  // 在单个组件信息中获取type和props，通过type获取ComponentCof，最后从ComponentConf获取PropComponent
  const {type, props, fe_id} = selectedComponent
  const componentConf = getComponentConByType(type)
  if (!componentConf) return <NoProp/>
  const {PropComponent} = componentConf

  //  修改ComponentProp
  function handleChange(newProps: ComponentPropsType) {
    console.log('newProps', newProps)
    dispatch(updateComponent({fe_id, newProps}))
  }

  return <PropComponent {...props} onChange={handleChange} disabled={isLocked}/>
};

export default ComponentProp;
